<!-- 资讯服务 -->
<template>
  <div class="consultation">

    <div class="consultation-model">
      <keep-alive>
        <sightseeing-img-zoom
          :conHeight="100"
          :sightseeingTabData="folkCustomImgZoomDataCon"
          :showBorder="false"
          @clickSightseeing="clickSightseeing">
        </sightseeing-img-zoom>
      </keep-alive>
    </div>

<!-- 旅游欣赏 -->
    <div class="consultation-model-travel">
      <img style="width: 80%; height: 94px;" :src="require('_as/title-8.png')" alt="">

      <div class="right-tab-outer">
        <div class="right-tab-con" v-if="videoList !== ''">
          <video controls="controls"
            width='1200'
            height='700'>
            <source :src="videoList" type="video/mp4" />
          </video>
        </div>
      </div>

      <div class="btn" @click="tohistoryMore">
        <span>查看更多</span>
      </div>

    </div>

  </div>
</template>

<script>
import SightseeingImgZoom from '_c/sightseeingImgZoom/sightseeing_img_zoom'
import AloneImgZoom from '_c/aloneImgZoom/alone_img_zoom'

// json数据
import folkCustomImgZoomDataCon from './folkCustomImgZoomDataCon'

import scrollAnimation from '@/api/scrollAnimation.js'

export default {
  data () {
    return {
      folkCustomImgZoomDataCon,
      movieCon: '',
      videoList: ''
    }
  },
  components: {
    SightseeingImgZoom,
    AloneImgZoom
  },
  created () {
    this._getVideoListData()
  },
  mounted () {
    const needScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0
    scrollAnimation(needScrollTop, 0)
  },
  methods: {
    tohistoryMore () {
      this.$router.push('consultation-video')
    },
    clickSightseeing (item) {
      switch (item.id) {
        case 0:
          this.$router.push({
            path: '/consultation_secondary/3-1',
            query: {
              title: item.title
            }
          })
          break
        case 1:
          this.$router.push({
            path: '/consultation_secondary/3-2',
            query: {
              title: item.title
            }
          })
          break
        case 2:
          this.$router.push({
            path: '/consultation_secondary/3-3',
            query: {
              title: item.title
            }
          })
          break
        case 3:
          this.$router.push({
            path: '/consultation_secondary/3-4',
            query: {
              title: item.title
            }
          })
          break
      }
    },
    _getVideoListData () {
      this.$http.get('/v2/movie', {
        id: '256635988819465386eadb2b52d73ba2'
      }).then(res => {
        this.videoList = res.data[0].movieHtml.match(/http.*?mp4/)[0]
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.consultation-model-travel {
  margin 40px 0 30px
  .right-tab-outer {
    display flex
    align-items center
    justify-content center
    margin-bottom 30px
    .right-tab-con {
      // width 1200px
    }
  }
  .btn {
    margin 10px auto
    width 130px
    &:hover {
      span {
        color #000
        border 1px solid #ddd
        box-shadow 0 0 30px 4px #ddd
      }
    }
    span {
      padding 10px 25px
      color #999
      width 100px
      cursor default
      border 1px solid #ddd
      border-radius 20px
    }
  }
}

</style>
